<template>
	<view class="container">
		<!-- <view  style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无数据</view> -->
		<!-- 空白页 -->
		<view v-if="!hasLogin || empty===true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else>
			
			
			
			
			<!-- 列表 -->
			<view class="cart-list">
				<!-- <block v-for="(item1, index1) in historyList" :key="index1" > -->
					<view class="cart-time"   >
						<!-- <view class="cart-time1" v-if="historyList[index1].goodsList.length>0">
							<view class="checkbox" v-if="edit"></view>
							<image  :src="item1.checked?'/static/selected.png':''"  mode="aspectFit" @click="check('day',0,index1)" v-if="edit"></image>
							{{historyList[index1].time}}
						</view> -->
						<block v-for="(item, index) in historyList" :key="index">
							<view class="cart-item"  :class="{'b-b': index!==historyList.length-1}" >
								<view class="checkbox" v-if="edit"></view>
								<image v-if="edit" class="image" :src="item.checked?'/static/selected.png':''"  mode="aspectFit" @click="check('item', index)" ></image>
							
								<view class="image-wrapper">
									<image  :src="img+item.THUMB"  :class="[item.loaded]" mode="aspectFill"  lazy-load  @load="onImageLoad('historyList', index)"  @error="onImageError('historyList', index)"></image>
									<text class="un-shouqing" v-if="item.PSTATE==2">已售罄</text>
								</view>
								
								<view class="item-right" @click="navToDetailPage(item)">
									<text class="clamp title" >{{item.NAME}}</text>
									<text class="attr clamp">{{item.SHORTINFO}}</text>
									<view class="item1">
										<text class="price" v-if="!item.MULTIPAY">¥{{item.SALEPRICE}}</text>
										
										<text class="price" v-if="item.MULTIPAY==2&&item.OPPOINT!=0">积分:{{item.OPPOINT}}</text>
										<text class="price" v-if="item.MULTIPAY==2&&item.OPDEDU!=0">抵扣券:{{item.OPDEDU}}</text>
										<text class="price" v-if="item.MULTIPAY==2&&item.OPCOUPON!=0">惠券:{{item.OPCOUPON}}</text>
										
										<text class="price" v-if="item.MULTIPAY==3&&item.MUCHSELLERPRICE!=0">¥{{item.MUCHSELLERPRICE}}</text>
										<text class="price" v-if="item.MULTIPAY==3&&item.MUCHSELLERPRICE!=0&&item.MPPOINT!=0">+</text>
										<text class="price" v-if="item.MULTIPAY==3&&item.MPPOINT!=0">积分:{{item.MPPOINT}}</text>
										<text class="price" v-if="item.MULTIPAY==3&&(item.MUCHSELLERPRICE!=0||item.MPPOINT!=0)&&item.MPDEDU!=0">+</text>
										<text class="price" v-if="item.MULTIPAY==3&&item.MPDEDU!=0">抵扣券:{{item.MPDEDU}}</text>
										<text class="price" v-if="item.MULTIPAY==3&&(item.MUCHSELLERPRICE!=0||item.MPPOINT!=0||item.MPDEDU!=0)&&item.MPCOUPON!=0">+</text>
										<text class="price" v-if="item.MULTIPAY==3&&item.MPCOUPON!=0">惠券:{{item.MPCOUPON}}</text>
									</view>
								</view>
								<view class="un-xiangsi" v-if="!edit" @click="navToSimilarity(item)"> 找相似 </view>
							</view>
						</block>
					</view>
				<!-- </block> -->
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section" v-if="edit">
					<text class="checkbox"></text>
					<image :src="allChecked?'/static/selected.png':''"  mode="aspectFit" @click="check('all')" ></image>
					<text style="font-size: 25upx;color: $font-color-light;line-height: 40upx;margin-left: 20upx;">全选</text>
					<view class="clear-btn" :class="{show: allChecked}" @click="deleteCartItem"> 删除 </view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { mapState } from 'vuex';
	export default {
		components: { },
		data() {
			return {
				edit:false,//是否在编辑状态
				total: 0, //总价格
				allChecked: false,//全选状态  true|false
				empty: false, //空白页现实  true|false
				historyList: [],
				dele:[],
				img:''
			};
		},
		onLoad(){
			this.loadData();
			this.img = getApp().globalData.imageAddress;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		watch:{
			//显示空白页
			historyList(e){
				let empty = e.length === 0 ? true: false;
				if(this.empty !== empty){
					this.empty = empty;
				}
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			async loadData(){
					this.$http.post("/user/history",{
						SIGNATURE:uni.getStorageSync("SIGNATURE"),
						TOKEN:uni.getStorageSync('userInfo').TOKEN,
					}).then(res=>{
						if(res.data.STATE==='0' && res.statusCode===200){
							let historyList = res.data.OBJECT.map(item=>{
								item.checked = false;
								return item;
							});
							this.historyList = historyList;
						}
					}).catch(err=>{
						console.log('request fail',err);
					})
					
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].THUMB = '/static/errorImage.jpg';
			},
			//跳转登录页
			navToLogin(){
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			 //选中状态处理
			check(type, index){
				if(type === 'item'){
					// this.historyList[index1].goodsList[index].checked = !this.historyList[index1].goodsList[index].checked;
					this.historyList[index].checked = !this.historyList[index].checked;
					// let checked = true;
					// this.historyList[index1].goodsList.map(item1=>{
					// 		if(item1.checked === true){
					// 		}else if(checked === true){
					// 			checked = false;
					// 		}
					// 	});
					// this.historyList[index].checked = checked;
				}else if(type === 'day'){
					this.historyList[index1].checked=!this.historyList[index1].checked;
					this.historyList[index1].goodsList.map(item=>{
						item.checked =this.historyList[index1].checked;
					})
				}else{
					const checked = !this.allChecked
					const list = this.historyList;
					list.map(item=>{
						item.checked=checked;
						// item.goodsList.map(item1=>{
						// 	item1.checked = checked;
						// });
					});
					this.allChecked = checked;
				};
				
				let list = this.historyList;
				let checked = true;
				list.map(item=>{
					// item.goodsList.map(item1=>{
					// 	if(item1.checked === true){
					// 		
					// 	}else if(checked === true){
					// 		checked = false;
					// 	}
					// });
					if(item.checked === true){
						
					}else if(checked === true){
						checked = false;
					}
				});
				this.allChecked = checked;
			},
			
			//删除
			deleteCartItem(){
				let list = this.historyList;
				list.map(item=>{
					// item.goodsList.map(item1=>{
					// 	if(item1.checked === true){
					// 		this.dele.push(item1.id);
					// 	}
					// });
					if(item.checked===true){
						this.dele.push(item.HISTORYID);
					}
				});
				
				uni.showModal({
					content: '确认删除？',
					success: (e)=>{
						if(e.confirm){
							let del=this.dele.join(",");
							this.$http.post("/user/deleHistory",{
								SIGNATURE:uni.getStorageSync("SIGNATURE"),
								TOKEN:uni.getStorageSync('userInfo').TOKEN,
								IDS:del,
							}).then(res=>{
								if(res.data.STATE==='0' && res.statusCode===200){
									this.dele.map(item=>{
										this.historyList.map(item1=>{
											if(item1.HISTORYID==item){
												this.historyList.splice(this.historyList.indexOf(item1),1)
											}
										})
									})
								}
							}).catch(err=>{
								console.log('request fail',err);
							})
							
							// #ifdef H5
							this.edit=false
							// #endif
						}
					}
				})
				
			},
			//清空
			clearCart(){
				uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							this.historyList = [];
						}
					}
				})
			},
			//计算总价
			calcTotal(){
				let list = this.historyList;
				if(list.length === 0){
					this.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				list.map(item=>{
					item.goodsList.map(item1=>{
						if(item1.checked === true){
							
						}else if(checked === true){
							checked = false;
						}
					});
				});
				
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},
			//跳转相似商品
			navToSimilarity(item){
				if(item.MULTIPAY){
					uni.navigateTo({
						url:`/pages/collect/similarity/similarity1?goodsId=`+item.GOODID
					})
				}else{
					uni.navigateTo({
						url:`/pages/collect/similarity/similarity?goodsId=`+item.ID
					})
				}
				
			},
			//商品详情页
			navToDetailPage(item) {
				if(item.MULTIPAY){
					let ids=item.GOODID;
					let sid=item.ID;
					uni.navigateTo({
						url: `/pages/product/productExchange?id=${ids}&sid=${sid}`
					})
				}else{
					let id = item.ID;
					uni.navigateTo({
						url: `/pages/product/product?id=${id}`
					})
				}
			},
		},
		// #ifndef MP
		
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap() {
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
				// #ifdef APP-PLUS
				// const pages = getCurrentPages();
				// const page = pages[pages.length - 1];
				// const currentWebview = page.$getAppWebview();
				// currentWebview.hideTitleNViewButtonRedDot({
				// 	index
				// });
				
				const currentWebview = page.$getAppWebview();
				let titileObj=currentWebview.getStyle().titleNView;
				if(!titileObj.buttons){
					return;
				}
				titileObj.buttons[0].text=titileObj.buttons[0].text ==="编辑" ?"完成":"编辑";
				currentWebview.setStyle({
					titleNView:titileObj
				});
								
				// #endif
				this.edit=this.edit?false:true;
				console.log(this.edit);
				/* uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							this.historyList = [];
						}
					}
				}) */
				
		}
		// #endif
	}
</script>

<style lang='scss'>
	.empty{
		position:fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100vh;
		padding-bottom:100upx;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		background: #fff;
		image{
			width: 240upx;
			height: 160upx;
			margin-bottom:30upx;
		}
		.empty-tips{
			display:flex;
			font-size: $font-sm+2upx;
			color: $font-color-disabled;
			.navigator{
				color: $uni-color-primary;
				margin-left: 16upx;
			}
		}
	}
		/* 足迹列表项 */
	
	.cart-list{
		background: #f5f5f5;
		
		.cart-time{
			margin-bottom: 20upx;
			.cart-time1{
				position: relative;
				color: $font-color-light;
				font-size:25upx;
				padding: 20upx 55upx;
				border: 1upx solid #eaeaed;
				background: #fff;
				display: flex;
				height: 80upx;
				.checkbox{
					width: 40upx;
					height: 40upx;
					font-size: 40upx;
					line-height: 1;
					color: #fff;
					background:#fff;
					border-radius: 58upx;
					border: 1upx solid $font-color-light;
				}
				image{
					width: 40upx;
					height:40upx;
					position:position;
					z-index: 8; 
					left: -40upx;
					top: 0upx;
				}
			}
			.cart-item{
				
				border: 1upx solid #eaeaed;
				background: #fff;
				display:flex;
				position:relative;
				padding:18upx 55upx;
				.image-wrapper{
					background-color: #fff;
					padding-top: 0upx;
					padding-left: 0upx;
					width: 150upx;
					height: 150upx;
					flex-shrink: 0;
					position:relative;
					
					image{
						border-radius:8upx;
					}
					.un-shouqing{
						position: absolute;
						z-index: 5;
						width: 100%;
						height: 30upx;
						border: 0upx solid #666666;
						background-color: #666666;
						color: #fff;
						font-size: 24upx;
						left: 0upx;
						top: 120upx;
						text-align: center;
					}
				}
				.checkbox{
					margin-top: 50upx;
					width: 40upx;
					height: 40upx;
					font-size: 40upx;
					line-height: 1;
					color: #fff;
					background:#fff;
					border-radius: 58upx;
					border: 1upx solid $font-color-light;
				}
				.image{
					width: 40upx;
					height:40upx;
					position:position;
					z-index: 8; 
					left: -40upx;
					top: 50upx;
				}
				.item-right{
					display:flex;
					flex-direction: column;
					flex: 1;
					
					position:relative;
					padding-left: 30upx;
					
					.title,.price{
						margin-top: 20upx;
						font-size:25upx;
						color: $font-color-dark;
						height: 40upx;
						width: 370upx;
						line-height: 30upx;
						word-wrap: break-word;
						word-break: normal;
						overflow:hidden;
					}
					.attr{
						font-size: 25upx;
						color: $font-color-light;
						height: 40upx;
						width: 370upx;
						line-height: 40upx;
						word-wrap: break-word;
						word-break: normal;
						overflow:hidden
					}
					.price{
						font-size: 25upx;
						height: 40upx;
						line-height:40upx;
						color: #F76260;
					}
					
					
				}
			}
			.un-xiangsi{
				position:absolute;
				right: 50upx;
				bottom: 30upx;
				z-index: 4;
				width: 115upx;
				height: 48upx;
				line-height: 45upx;
				text-align: center;
				font-size: 25upx;
				color: $font-color-light;
				background: #fff;
				border-radius:5px;
				border: 1upx solid $font-color-light;
			}
		}
	}
	/* 底部栏 */
	.action-section{
		/* #ifdef H5 */
		margin-bottom:0upx;
		/* #endif */
		position:fixed;
		left: 0upx;
		bottom:0upx;
		z-index: 95;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		padding: 0 40upx;
		background: rgba(255,255,255,1);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 0upx;
		.checkbox{
			position:absolute;
			left:50upx;
			top: 30upx;
			width: 40upx;
			height: 40upx;
			z-index: 5;
			font-size: 40upx;
			line-height: 1;
			color: #fff;
			background:#fff;
			border-radius: 50px;
			border: 1upx solid $font-color-light;
		}
		image{
			width: 40upx;
			height: 100%;
			position:position;
			z-index: 8;
			left: 10upx;
		}
		.clear-btn{
			position:absolute;
			left: 550upx;
			top: 20upx;
			z-index: 4;
			width: 145upx;
			height: 66upx;
			line-height: 58upx;
			text-align: center;
			font-size: 25upx;
			color: #f76206;
			background: #fff;
			border-radius:5px;
			border: 1upx solid #F76260;
			
		}
	}
	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked{
		color: $uni-color-primary;
	}
	
</style>
